import React, {Component} from 'react';
import {Spin, Row, Col, Button} from 'antd';
import '../css/register.css';
import {Head} from '../components/EditComponent';
import app from '../AppMethod';
import {customer, wechat, user} from "../value";
import {config} from "../config";

class SearchOrder extends Component {
    constructor(props) {
        super(props);
        this.state = {
            data: [],
            loading: false,
            hasMore: true,
            index: 5,
            customer_id: '',
            page: 0,
            size: 4
        }
    };

    render() {
        return (
            <div className="registerContainer">
                <div style={{position: 'fixed', width: '100%', height: '44px', top: 0, left: 0, zIndex: 4}}>
                    <Head back="true" backTitle="已绑定客户" click={() => this.handleBack()}/>
                </div>
                <Spin spinning={this.state.loading}>
                    {
                        this.state.data.length > 0 ?
                            <div style={{marginTop: 54}}>
                                {
                                    this.state.data.length > 0 ?
                                        this.state.data.map((item, index) => {
                                            return (
                                                <OrderItem key={index} data={item}
                                                           handleDrop={(id) => this.handleDrop(id)}
                                                           handleReresh={() => this.handleSearchCustomer()}
                                                />
                                            )
                                        }) : ''
                                }
                            </div> : ''
                    }
                    {
                        this.state.data.length <= 0 ?
                            <div style={{textAlign: 'center', marginTop: '64px'}}>
                                <div>暂无绑定的客户</div>
                            </div> : ''
                    }
                </Spin>
                <div style={{marginTop: 15,marginBottom:15, textAlign: 'center'}}>
                    <Button style={{width: 150}} type={'primary'}
                            onClick={() => this.handleDropBind('/customerSearchAndBind')}>去绑定</Button>
                </div>
            </div>
        )
    };

    componentDidMount() {
        this.handleSearchCustomer();
    };

    handleSearchCustomer() {
        const _this=this;
        app.post(customer.SEARCH_USERCUSTOMER, {customer_open_id: app.getData("openid")}).then((result1) => {
            if (result1.code === 1) {
                let dataSet = result1.data.dataSet;
                _this.setState({data: dataSet, loading: false});
            } else {
                _this.setState({data: [], loading: false});
                app.alert(result1.msg, 'error', 2);
            }
        })
    }

    /**
     * 处理返回事件
     */
    handleBack() {
        this.props.history.goBack();
    };

    /**
     * 处理跳转到绑定页面
     */
    handleDropBind(path) {
        this.props.history.push(config.path + path);
    }

    /**
     * 处理跳转到查看订单页面
     */
    handleDrop(id) {
        this.props.history.push(config.path + '/customerOrder/' + id);
    }
}

/**
 * 订单组件
 */
class OrderItem extends Component {
    constructor(props) {
        super(props);
        this.state = {}
    };

    render() {
        const {customer_name, customer_code, customer_phone, customer_address, customer_id} = this.props.data;
        return (
            <Row style={{backgroundColor: '#fff', padding: '10px 12px', margin: '10px'}}>
                <Row style={{height: '26px', lineHeight: '26px'}}>
                    客户名：{customer_name}
                </Row>
                <Row style={{height: '26px', lineHeight: '26px'}}>
                    客户编号：{customer_code}
                </Row>
                <Row style={{height: '26px', lineHeight: '26px'}}>
                    联系方式：{customer_phone}
                </Row>
                <Row style={{height: '26px', lineHeight: '26px'}}>
                    地址：{customer_address}
                </Row>
                <Row style={{height: '30px', lineHeight: '30px', marginTop: 5}}>
                    <Col span={12} style={{textAlign: 'center'}}><Button type={'primary'}
                                                                         onClick={() => this.handleDrop(customer_code)}>查看订单</Button></Col>
                    <Col span={12} style={{textAlign: 'center'}}><Button type={'primary'}
                                                                         onClick={() => this.handleCancelBind(customer_id)}>取消绑定</Button></Col>
                </Row>
            </Row>
        )
    }

    handleDrop(customer_code) {
        this.props.handleDrop(customer_code);
    };

    /**
     * 取消绑定
     * @param id
     */
    handleCancelBind(id) {
        const _this = this;
        let data = {
            customer_open_id: app.getData('openid'),
            customer_id: id
        };
        app.post(customer.UNBIND_USERCUSTOMER, data).then((result) => {
            if (result.code === 1) {
                app.alert('取消成功', 'success', 2);
                _this.props.handleReresh();
            } else {
                app.alert('取消失败', 'error', 2);
            }
        })
    }
}

export default SearchOrder;